<template>
  <div v-if="GLOBAL.sysUserVisible=='1'">
    <div v-if="GLOBAL.global_limit.includes('27')">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row style="margin-left: 10px;">
          <el-col :span="2" style="margin-right: 70px;">
            <el-input style="width:150px"    v-model="initparams.scalename" placeholder="请输入量表名称" clearable></el-input>
          </el-col>
          <el-col :span="2" style="margin-right: 70px;">
            <el-select style="width:150px" v-model="initparams.schoolname" clearable placeholder="请选择学校名称">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" style="margin-right: 120px;">
            <el-select
              v-model="initparams.isnz"
              style="width:200px" clearable
              placeholder="请选择是否内置量表"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" style="margin-right: 80px;">
            <el-select
              v-model="initparams.status"
              style="width:150px" clearable
              placeholder="请选择量表状态"
            >
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left:20px;" type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table class="pcc"
              stripe
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        label="序号"
        type="index"
        width="50"
      ></el-table-column>
      <el-table-column label="量表名称" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.scaleName }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column width="50">-->
      <!--        <template slot-scope="scope">-->
      <!--          <img src="../../assets/logo.png" alt="" class="tzimg"  />-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="是否系统内置">
        <template slot-scope="scope">
          <!-- <div :class='{ neizhi: scope.row.isnz == 0 }'>
            {{ scope.row.isnz }}
          </div> -->
          <div v-if="scope.row.isnz == 0">否</div>
          <div v-if="scope.row.isnz == 1">是</div>
        </template>
      </el-table-column>
      <el-table-column prop="schoolName" label="高校名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <div  class="status" v-if="scope.row.status == 0">禁用中</div>
          <div  class="status" v-if="scope.row.status == 1">启用中</div>
        </template>
      </el-table-column>
      <div v-if="GLOBAL.global_limit.includes('28')">
        <el-table-column fixed="right" label="设置">
          <template slot-scope="scope">
            <el-button type="text" size="small">
              <!-- <div class="czBtn" v-if="tableData[scope.$index].status == '使用中'" @click="disable(scope.$index, tableData)">禁用</div>
              <div class="deleteBtn" v-if="tableData[scope.$index].status == '已禁用'" @click="deletebtn(scope.$index, tableData)">删除</div> -->
              <div class="czBtn2" v-if="scope.row.status ==0" @click="editScale(scope.row)">启用</div>
              <div class="czBtn" v-if="scope.row.status ==1" @click="editScale(scope.row)">禁用</div>
<!--              <div class="deleteBtn"  @click="deletebtn(scope.row)">删除</div>-->
              <!-- <div class="czBtn" @click="disable(scope.row)">禁用</div>
              <div class="deleteBtn" @click="deletebtn(scope.row)">删除</div> -->
            </el-button>
          </template>
        </el-table-column>
      </div>
    </el-table>
  </div>
</template>

<script>
    export default {
        name: "scaleManagement",
        data() {
            return {
                tableData: [

                ],
                multipleSelection: [],
                formInline: {
                    user: "",
                    region: "",
                },
                options1: [

                ],
                options3: [
                    {
                        value: "内置",
                        label: "1",
                    },
                    {
                        value: "自定义",
                        label: "0",
                    },
                ],
                options4: [
                    {
                        value: "禁用中",
                        label: "0",
                    },
                    {
                        value: "使用中",
                        label: "1",
                    }
                ],
                value4: "",
                initparams: {
                    pageNum: 1,
                    pageSize: 10,
                    scalename:'',
                    schoolname: '',
                    isnz: '',
                    status: '',
                }
            };
        },
        mounted() {
            this.$axios.post("managementSystem/university/getAllNameByUid").then(res => {
                if (res.data.errorCode == 200) {
                    var u = res.data.schoolNameList;
                    for (var i in u) {
                        this.options1.push(u[i]["universityName"])
                    }
                    console.log("高校数据："+this.options1)
                }
            });
            this.initdata();
        },
        methods: {
            initdata() {
                this.$axios.post("managementSystem/scale/scaleList", this.initparams).then(res => {
                    if (res.data.errorCode == 200) {
                        this.tableData = res.data.scaleManagementTable;
                    }
                });
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach((row) => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            editScale(row) {
                this.$axios.put("managementSystem/scale/scaleDisable",{
                    id:row.id,
                    status: row.status
                }).then(res => {
                    let { errorCode, errorMsg } = res.data
                    if (errorCode === 200) {
                        this.initdata();
                        this.$message({
                            type: "success",
                            message: errorMsg,
                        });
                    }
                })
            },
            deletebtn(row) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.$axios.delete("managementSystem/scale/scaleDelete", {
                        data: {
                            id: row.id
                        },
                    }).then(res => {
                        let {errorCode, errorMsg } = res.data
                        if (errorCode === 200) {
                            this.initdata();
                            this.$message({
                                type: "success",
                                message: errorMsg,
                            });
                        } else{
                            this.$message({
                                type: "error",
                                message: errorMsg,
                            });
                        }
                    })
                }).catch((err) => {
                    this.$message({
                        type: "error",
                        message: err,
                    });
                });
            },
            more() {
                window.location.href = "https://www.baidu.com/";
            },
            tz1() {
                window.location.href = "https://www.baidu.com/";
            },
            tz2() {
                this.$router.push({ path: "/home/collegeOperation" });
            },
            search() {
                this.initdata();
            },
        },
    };
</script>

<style scoped>
  .neizhi {
    width: 50px;
    height: 25px;
    background: #efb65a;
    color: #fff;
    display: inline-block;
  }
  .status {
    display: inline-block;
  }
  .statusSel {
    color: #42987b;
  }
  .statusSel2 {
    color: #92474e;
  }
  .statusSel3 {
    color: #c69652;
  }
  .statusSel4 {
    color: #34aab3;
  }
  .statusSel5 {
    color: #7e1570;
  }
  .czBtn {
    display: inline-block;
    width: 50px;
    height: 25px;
    background-color: #efaeb2;
    line-height: 25px;
    color: #fff;
  }
  .czBtn2 {
    display: inline-block;
    width: 50px;
    height: 25px;
    background-color: #7FFF00;
    line-height: 25px;
    color: #fff;
  }
  .deleteBtn {
    background: #5d5d5d;
    color: #fff;
    line-height: 25px;
    display: inline-block;
    width: 50px;
    height: 25px;
  }
  .tzimg {
    width: 20px;
    height: 20px;
  }
  /deep/ .pcc .cell {
    overflow: visible;
  }
</style>

